<template>
  <!--和平精英自动获取授权 -->
  <el-dialog :title="'扫码授权'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="400px" append-to-body @close="close">
    <div class="form-box" style="height: 250px;" v-loading="loading">
      <label for="" v-if="fromType=='attrs'">
        <b>选择大区</b>
        <el-select v-model="type" placeholder="请选择" @change="daquchange">
          <el-option
            v-for="item in daquList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </label>
      <div class="demo-ruleForm" v-if="qrCode">
        <img :src="qrCode" alt="" style="width: 200px;height: 200px;">
        <div class="center">
          {{ msg == '二维码认证中' ? '已扫码，等待授权' : '请扫描二维码进行授权' }}
        </div>
        <div><el-button @click="checkHpQrcode" type="primary" size="mini">我已授权</el-button></div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import autoApi from "@/api/autoProduction/information.js"
export default {
  name: "",
  props:["fromType"],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      msg: '',
      qrCode: '',
      uuid: '',
      timer: null,
      type:'',
      daquList:[{
          name:'QQ',
          value:'1'
        },{
          name:'微信',
          value:'2'
        },
      ],
      timeOutTimer:null,
      checkPending:false,
      HPloginData:''
    };
  },
  created() {

  },
  beforeDestroy() {
    this.closeTimer();
  },
  methods: {
    // 打开弹窗
    open(carrierId) {
      this.loading = false
      this.dialogVisible = true
      this.qrCode = ''
      this.uuid = ''
      this.type = ''
      if(carrierId == "38838"){
        this.type = 1
      }else{
        this.type = 2
      }
      
      if(!this.fromType){
        // 直接获取二维码
        this.getQRcode()
      } 
    },
   async daquchange(e){
    this.loading = true;
    let res = ''
    if(this.fromType=='attrs'){
      if(e==1){
        // QQ
        try {
          res = await autoApi.dictgetQQERWEIMA()
        } catch (error) {
          
        }
      }else if(e==2){
        // 微信
        res = await autoApi.dictgetWXERWEIMA()
      }
    }else{

    }
      this.qrCode ="data:image/png;base64," + res.data.qrcode
      this.uuid = res.data.qrsig
      this.loading = false;
    },
    close(){
      this.closeTimer();
    },
    // 关闭延时器
    closeTimer() {
      if (this.timeOutTimer) clearTimeout(this.timeOutTimer);
      this.timeOutTimer = null;
    },
    // 获取二维码
    async getQRcode() {
      this.loading = true;
      this.closeTimer();
      const obj = {
        authType:1
      }
      if (this.type == 1) {
        // qq
        obj.authType = 1
      } else {
        // 微信
        obj.authType = 2
      }
      try {
        const res = await autoApi.getHPJYqrcode(obj);
        if (res.code==200&&res.data.code==200) {
          this.qrCode = "data:image/png;base64," + res.data.data.qrcode;
          this.uuid = res.data.data.qrsig;
          if (!this.checkPending&&this.dialogVisible) this.checkHpQrcode();
        }else{
          this.$message.error(res.data.msg)
        }
      } catch (error) {
        this.loading = false;
      }
      this.loading = false;
    },
    // 查询二维码状态
    // 轮询和平 扫码状态
    async checkHpQrcode() {
      this.closeTimer();
      if(this.dialogVisible){
        this.checkPending = true;
        const obj = {
          type:'',
          qrsig:this.uuid
        }
        if (this.type == 1) {
          // qq
          obj.type = 'qq'
        } else {
          // 微信
          obj.type = 'wx'
        }
        try {
          const res = await autoApi.hpjyv2CheckLogin(obj);
          
          if (res.code==200&& res.data.code) {
            if (res.data.code == 200 && res.data.data == "200") {
              // 已授权  开始获取数据
              this.getHpInfo();
            } else if ( res.data.code == 200 && res.data.data == "300") {
              // 未失效或认证中  继续查询
              this.msg = res.data.msg
              // 延时1秒后查询二维码状态
              this.timeOutTimer = setTimeout(() => {
                this.checkHpQrcode();
              }, 2000);
            }else{
              this.getQRcode()
            }
          }
        } catch (error) {
          
        }
        this.checkPending = false;
      }
    
    },
    // 获取数据
    async getHpInfo() {
      this.loading = true;
      const obj = {
          type:'',
          qrsig:this.uuid
        }
        if (this.type == 1) {
          // qq
          obj.type = 'qq'
        } else {
          // 微信
          obj.type = 'wx'
        }

        try {
          const res = await autoApi.hpjyv2GetData(obj);
          if (res.code==200&&res.data.code==200) {
            // clearInterval(this.Times);
            this.dialogVisible = false;
            this.$emit('success',res.data.data)
            this.$store.dispatch("getShopInfo");
          }
        } catch (error) {
          this.getQRcode();
        }
      this.loading = false;
    },
    // 属性同步的获取数据方法
    async getToken() {
      let obj = {
        qrsig: this.uuid
      }
      this.loading = true
      let res = ''
      if(this.fromType=='attrs'){
        if(this.type==1){
          // QQ
          try {
            res = await autoApi.dictgetQQInfo(obj)
          } catch (err) {
            this.loading = false
            if (err.code == 500) {
              this.daquchange(this.type==1)
            }
          }
        }else if(this.type==2){
          // 微信
          try {
            res = await autoApi.dictgetwxInfo(obj)
          } catch (err) {
            this.loading = false
            if (err.code == 500) {
              this.daquchange(this.type==1)
            }
          }
          
        }
      }else{
        
      }
      this.loading = false
      if(res&&res.code==200){
        this.$alert('同步成功！')
        this.$emit('success')
        this.dialogVisible = false
      }
    },
    getTokenInterval() {
      window.clearInterval(this.timer)
      this.timer = window.setInterval(() => {
        this.getToken()
      }, 5000)
    }

  }
};
</script>
<style scoped lang="css">
.demo-ruleForm {
  text-align: center;
  margin-top: 20px;
}
</style>
